<template>
  <el-dialog
    title="产品介绍"
    width="70%"
    top="5vh"
    v-el-drag-dialog
    :close-on-press-escape = false
    :close-on-click-modal	= false
    :visible.sync="answerDialog"
    :before-close="closeanswer"
  >
    <el-form label-width="120px" :model="recordForm" :rules="rules" ref="recordForm">
      <el-form-item label='需求:'>
        <el-input type="textarea" :rows="5" v-model="recordForm.product"></el-input>
      </el-form-item>
      <el-form-item label='AI回复:'>
        <el-input type="textarea" :rows="15" v-model="recordForm.AIanswer"></el-input>
        <!-- <el-button class="copyButton" type="text" link icon="Tickets" @click="copyAnswer(recordForm.AIanswer)">复制</el-button> -->
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" link icon="Tickets" @click="copyAnswer(recordForm.AIanswer)">复制AI回复</el-button>
      <el-button type="info" @click="closeanswer">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
export default {
  directives: { elDragDialog },
  props: {
    answerDialog:{
      type: Boolean,
      default: () => false
    },
    answerForm:{
      type: Object,
      default: () => {}
    },
  },
  watch:{
    answerForm(value){
      const {product} = value;
      const company = product.company ? `公司描述: ${product.company}\n` : '';
      const keyword = product.keyword ? `关键词: ${product.keyword}\n` : '';
      const paragraphs = product.paragraphs ? `写作段落: ${product.paragraphs}\n` : '';
      // const modal = product.modal ? `写作语气: ${product.modal}\n` : '';
      const wordCount = product.wordCount ? `字数: ${product.wordCount}\n` : '';
      const language = product.language ? `目标语言: ${product.language}\n` : '';
      this.recordForm = {...value, product:`产品描述：${product.product}\n${company}${keyword}${paragraphs}${wordCount}${language}`};
    }
  },
  data(){
    return{
      recordForm: {},
      rules: {}
    }
  },
  methods:{
    submit(){
      this.$emit('submit', this.recordForm)
    },
    copyAnswer(data){
      let elInput = document.createElement('textarea')
      elInput.value = data
      document.body.appendChild(elInput)
      // 选择对象
      elInput.select()
      // 执行浏览器复制命令
      this.$message.success('复制成功')
      document.execCommand("Copy")
      elInput.remove()
    },
    closeanswer(){
      this.$emit('closeanswer')
    }
  }
}
</script>

<style lang="scss" scoped>
  .relatedConditions{
    display: flex;
    align-items: center;
    height: 95px;
    .conditionname{
      width: 120px;
      height: 30px;
      line-height: 30px;
      color: #409EFF;
      border: 2px solid #409EFF;
      text-align: center;
      border-radius: 20px;
      margin-right: 20px;
    }
  }
  .copyButton{
    position: absolute;
    bottom: 10px;
    right: 20px;
    z-index: 100;
  }
</style>
